<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" %>
<%@ include file="user_header.jsp" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>相册制作页面</title>
    <link rel="stylesheet" type="text/css" href="/static/css/herstellung1.css" media="all"/>
    <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<!--区域1 -->
<div id="templatenliste">
    <h1>该系列内页模板推荐</h1>
    <hr style="width:100%"/>
    <ul>
        <c:forEach items="${productModel}" var="temp">
            <c:if test="${temp.type==3}">
                <li>
                    <img src="${temp.modelUrl}"/>
                    <span>${temp.name}</span>
                </li>
            </c:if>
        </c:forEach>
    </ul>
</div>

<!-- 区域2 -->
<div id="herstellungzone">
    <h1>产品制作区域</h1>
    <hr style="width:100%"/>
    <div class="herstellen">
        <input type="hidden" id="worksId" name="worksId" value="0">
        <ul>
            <c:forEach items="${productModel}" var="temp" begin="0" varStatus="status">
                <c:if test="${temp.type==1}">
                    <form id="form_${temp.id}" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="productModelId" value="${temp.id}">
                    <input type="hidden" name="productId" value="${temp.productId}">
                    <li>
                    <h3> 步骤1：制作封面和封底页面</h3>
                    <img class="template" src="${temp.modelUrl}" alt="Template" width="428px"
                         height="620px"/>
                </c:if>
                <c:if test="${temp.type==2}">
                    <img class="template" src="${temp.modelUrl}" alt="Template" width="428px"
                         height="620px"/>
                    <h2>封面和封底</h2>
                    <c:forEach items="${productModel[0].modelInputs}" var="val">
                        <h4> ${val.inputTable}:
                            <input class="ctext"
                                   <c:if test="${val.inputType==1}">type="file"</c:if>
                                   <c:if test="${val.inputType==2}">type="text"</c:if>
                                   name="${val.inputName}"/>
                        </h4>
                    </c:forEach>
                    <input type="button" value="预览"/>
                    <input type="reset" value="修改"/>
                    <input type="button" value="保存" onclick="add(${productModel[0].id})"/>
                    <hr/>
                    </li>
                    </form>
                </c:if>
                <c:if test="${temp.type==3}">
                    <form id="form_${temp.id}" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="productModelId" value="${temp.id}">
                        <input type="hidden" name="productId" value="${temp.productId}">
                        <li>
                            <h3> 步骤${status.index}:在左侧推荐栏选择合适的内页模板,拖动到指定位置</h3>
                            <img class="template" src="${temp.modelUrl}" alt="Template" width="428px"
                                 height="620px"/>
                            <c:forEach items="${temp.modelInputs}" var="val">
                                <h4> ${val.inputTable}:
                                    <input class="ctext"
                                           <c:if test="${val.inputType==1}">type="file"</c:if>
                                           <c:if test="${val.inputType==2}">type="text"</c:if>
                                           name="${val.inputName}"/>
                                </h4>
                            </c:forEach>
                            <input type="button" value="预览"/>
                            <input type="reset" value="修改"/>
                            <input type="button" value="保存" onclick="add(${temp.id})"/>
                            <hr/>
                        </li>
                    </form>
                </c:if>
            </c:forEach>
        </ul>
    </div>
</div>
<script type="application/javascript">
    function add(id) {
        var formData = new FormData($("#form_" + id)[0]);
        var worksId = $("#worksId").val();
        $.ajax({
            url: '/works/' + worksId,
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                alert("成功");
                if (worksId == 0) {
                    $("#worksId").val(JSON.parse(data).data);
                }
            },
            error: function () {
                alert("失败");
            }
        });
    }
</script>
</body>
</html>